<template>
  <div class="contracting-details" ref="rectification">
    <div style="display: flex; align-items: center; padding: 20px">
      <title-view :title="userInfo?.customerName" />
      <div style="color: #86909c; font-size: 18px">
        <div>丨{{ userInfo?.address }}</div>
      </div>
    </div>
    <div class="contracting-details-container">
      <div class="container-header">
        <el-select
          v-model="type"
          placeholder="请选择"
          style="width: 200px"
          @change="handleChange"
          clearable
          @clear="handleChange"
        >
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <div>
          <span>共选择{{ listNum || 0 }}项，总计发包金额：</span>
          <span style="color: #ea0000">¥{{ listMoneyTotal || 0 }}</span>
          <span style="color: #ea0000" v-if="userInfo?.contracteesType === 2"
            >（该项目为按面积发包模式，实际发包金额¥{{ userInfo?.factMoney }}）</span
          >
        </div>
      </div>
      <el-table
        ref="myTable"
        class="custom-table"
        :data="tableData"
        row-key="spaceIdTree"
        :tree-props="treeProps"
        :height="tableHeight"
        :expand-row-keys="expandRowKeys"
        :row-class-name="tableRowClassName"
        @expand-change="handleExpandChange"
        style="width: 100%; margin-top: 20px"
        :header-cell-style="{ background: '#F2F6FC', color: '#4E5969', 'font-weight': 400, 'font-size': '14px' }"
      >
        <el-table-column prop="date" label="名称" width="150" show-overflow-tooltip>
          <template #header>
            <div style="display: flex; align-items: center">
              <div>名称</div>
              <div style="margin-top: 8px; margin-left: 6px">
                <img
                  v-if="isExpansion"
                  @click="toggleExpandAll"
                  style="width: 20px; cursor: pointer"
                  src="@/assets/images/image/sq.png"
                  alt=""
                />
                <img
                  v-else
                  @click="toggleExpandAll"
                  style="width: 20px; cursor: pointer"
                  src="@/assets/images/image/zk.png"
                  alt=""
                />
              </div>
            </div>
          </template>
          <template #default="{ row }">
            {{ row.quotaInfoVOList ? row.spaceName : row.quotaName }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="明细" show-overflow-tooltip>
          <template #default="{ row }">
            <span v-if="row.mainSubcontractMoney">主材：￥{{ row.mainSubcontractMoney }}/</span>
            <span v-if="row.auxiliarySubcontractMoney">辅材：¥{{ row.auxiliarySubcontractMoney }}/</span>
            <span v-if="row.workerSubcontractMoney">人工：¥{{ row.workerSubcontractMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="单位" show-overflow-tooltip>
          <template #default="{ row }">
            {{ unitData.find(item => item.dictValue == row.unit)?.dictLabel }}
          </template>
        </el-table-column>
        <el-table-column prop="actualProjectVal" label="实际施工量" show-overflow-tooltip width=""/>
        <el-table-column prop="address" label="发包量">
          <template #default="{ row }">
            <el-input-number
              v-if="!row.quotaInfoVOList"
              style="width: 100%"
              v-model="row.contracteesNum"
              :controls="false"
              disabled
            />
          </template>
        </el-table-column>
        <el-table-column prop="subcontractTotalMoney" label="发包单价" />
        <el-table-column prop="subcontractTotalMoneyCnt" label="发包价(发包量*单价)" show-overflow-tooltip width="160" />
        <el-table-column prop="bindNames" label="品牌" show-overflow-tooltip />
        <el-table-column prop="modelNames" label="型号" show-overflow-tooltip />
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { nextTick, ref } from "vue";
import { allInfo, queryInfoListV2 } from "@/apis/contracting";
import { useRoute } from "vue-router";
import { selectDictDataByType } from "@/apis/dict/dict";

const route = useRoute();

const unitData = ref([]);
const userInfo = ref();
const type = ref();
const options = ref([
  {
    value: 1,
    label: "主材"
  },
  {
    value: 2,
    label: "辅材"
  },
  {
    value: 3,
    label: "人工"
  }
]);

const tableData = ref([]);
const treeProps = ref({
  checkStrictly: false,
  children: "quotaInfoVOList"
});
const rectification = ref();
const tableHeight = ref(0);
const expandRowKeys = ref([]);
const myTable = ref();
const listNum = ref(0);
const listMoneyTotal = ref(0);
const isExpansion = ref(true);
const toggleExpandAll = () => {
  isExpansion.value = !isExpansion.value;
  if (isExpansion.value) {
    toggleRowExpansionAll(tableData.value, isExpansion);
  } else {
    expandRowKeys.value = [];
  }
};
const toggleRowExpansionAll = (data, isExpansion) => {
  data.forEach(item => {
    myTable.value.toggleRowExpansion(item, isExpansion);
    if (item.quotaInfoVOList !== undefined && item.quotaInfoVOList !== null) {
      toggleRowExpansionAll(item.quotaInfoVOList, isExpansion);
    }
  });
};
const tableRowClassName = ({ row }) => {
  if (expandRowKeys.value.includes(row.spaceIdTree)) {
    return "active-row";
  }
  return "";
};
const handleExpandChange = (row, expanded) => {
  if (expanded) {
    expandRowKeys.value.push(row.spaceIdTree);
  } else {
    const index = expandRowKeys.value.indexOf(row.spaceIdTree);
    if (index !== -1) {
      expandRowKeys.value.splice(index, 1);
    }
  }
  isExpansion.value = expandRowKeys.value.length > 0;
};
const handleChange = () => {
  getQueryInfoList();
};
// 获取列表
const getist = async () => {
  const { data } = await allInfo(route.query.customerId);
  userInfo.value = data;
};
const getQueryInfoList = async () => {
  const { data } = await queryInfoListV2({ contracteesId: route.query.contracteesId, type: type.value });
  let ids = [];
  let num = 0;
  let money = 0;
  data.map(item => {
    ids.push(item.spaceId);
    item.quotaInfoVOList.map(items => {
      num += 1;
      money += Number(items.subcontractTotalMoneyCnt);
    });
  });
  listNum.value = num;
  listMoneyTotal.value = money;
  expandRowKeys.value = ids;
  tableData.value = data || [];
};
const getUnit = async () => {
  const { data } = await selectDictDataByType("shop_unit");
  unitData.value = data || [];
};
getUnit();
getist();
getQueryInfoList();
const setHeight = () => {
  nextTick(() => {
    tableHeight.value = rectification.value?.getBoundingClientRect().height - 138;
  });
};
setHeight();
</script>

<style scoped lang="scss">
.contracting-details {
  height: calc(100%);
  background-color: #fff;
  box-shadow: 4px 5px 16px 0 rgba(0, 0, 0, 0.04);

  &-container {
    padding: 20px;
    border-top: 1px solid #dcdfe6;
  }
}

:deep(.el-select__wrapper) {
  background: #f2f3f5 !important;
  border-radius: 2px 2px 2px 2px !important;
  box-shadow: none !important;
}

.container-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 自定义树状表格图标 */
/* 有子节点 且未展开 */
.custom-table :deep(.el-table__expand-icon) {
  background: url("@/assets/images/image/zk1.png") no-repeat;
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  background-size: 16px !important;

  .el-icon {
    display: none;
  }
}

/* 有子节点 且已展开 */
.custom-table :deep(.el-table__expand-icon--expanded) {
  background: url("@/assets/images/image/sq1.png") no-repeat;
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  background-size: 16px !important;
  transform: rotate(180deg); /* 展开时旋转 */
  .el-icon {
    display: none;
  }
}

.custom-table :deep(.active-row) {
  background-color: #d9e8ff !important;
}

.custom-table :deep(.is-disabled) {
  .el-input__wrapper {
    background: #ffffff !important;
  }
}
</style>
